<script setup lang="ts"></script>

<template>
  <div class="contact-page">
    <!-- 头部导航 -->
    <div class="wrapper-content header-nav">
      <div class="header-left">
        <span class="logo" @click="$router.push('/index')">FileQX</span>
      </div>
      <div class="header-right">
        <ul class="nav-list">
          <router-link to="/contactUs">
            <li class="nav-item first-item">联系我们</li>
          </router-link>
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
          <router-link to="/register">
            <li class="nav-item last-item">报名</li>
          </router-link>
        </ul>
        <ul class="login-list">
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="wrapper-content page-wrapper small">
      <div class="page-title left headline">
        <h1 class="title">联系我们</h1>
        <h2 class="description">你有任何问题吗？请与我们联系。</h2>
      </div>
      <form class="form block-form">
        <div class="block-wrapper">
          <label>电子邮件:</label>
          <div>
            <input placeholder="输入您的电子邮件" type="email" class="input-dark input-color focus-border-theme" />
          </div>
        </div>
        <div class="block-wrapper">
          <label>消息:</label>
          <div>
            <textarea
              placeholder="在这里输入你的消息..."
              rows="6"
              class="input-color focus-border-theme input-dark"
            ></textarea>
          </div>
        </div>

        <div>
          <button
            class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300 submit-button"
          >
            <span class="pr-1 text-lg font-extrabold"> 发送信息 </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </form>
    </div>
    <!-- 底部 -->
    <div class="wrapper-content footer-nav">
      <div class="logo">
        <b class="logo-text">FileQX</b>
      </div>
      <ul class="navigation-links">
        <li><router-link to="/contactUs" class="hover-text-theme">联系我们</router-link></li>
      </ul>
      <ul class="navigation-links">
        <li>
          <router-link to="/termsService" class="hover-text-theme">Terms of Service</router-link>
        </li>
        <li>
          <router-link to="/privacyPolicy" class="hover-text-theme">Privacy Policy</router-link>
        </li>
        <li>
          <router-link to="/cookiePolicy" class="hover-text-theme">Cookie Policy</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/contactUs.scss';
</style>
